/* @flow */

'use strict';

import Actions from './components/Actions';
import Button from './components/Button';
import CRUDStore from './flux-imm/CRUDStore';
import Dialog from './components/Dialog';
import Form from './components/Form';
import FormInput from './components/FormInput';
import Logo from './components/Logo';
import Rating from './components/Rating';
import React from 'react';
import ReactDOM from 'react-dom';
import Suggest from './components/Suggest';
import schema from './schema';

CRUDStore.init(schema);

ReactDOM.render(
  <div style={{padding: '20px'}}>
    <h1>Component discoverer</h1>

    <h2>Logo</h2>
    <div style={{display: 'inline-block', background: 'purple'}}><Logo /></div>

    <h2>Buttons</h2>
    <div>Button with onClick: <Button onClick={() => alert('ouch')}>Click me</Button></div>
    <div>A link: <Button href="http://reactjs.com">Follow me</Button></div> 
    <div>Custom class name: <Button className="custom">I do nothing</Button></div> 

    <h2>Suggest</h2>
    <Suggest options={['eenie', 'meenie', 'miney', 'mo']} />

    <h2>Rating</h2>
    <div>No initial value: <Rating /></div>
    <div>Initial value 4: <Rating defaultValue={4} /></div>
    <div>This one goes to 11: <Rating max={11} /></div>
    <div>Read-only: <Rating readonly={true} defaultValue={3} /></div>

    <h2>Form inputs</h2>
    <table><tbody>
      <tr>
        <td>Vanilla input</td>
        <td><FormInput /></td>
      </tr>
      <tr>
        <td>Prefilled</td>
        <td><FormInput defaultValue="it's like a default" /></td>
      </tr>
      <tr>
        <td>Year</td>
        <td><FormInput type="year" /></td>
      </tr>
      <tr>
        <td>Rating</td>
        <td><FormInput type="rating" defaultValue={4} /></td>
      </tr>
      <tr>
        <td>Suggest</td>
        <td><FormInput 
          type="suggest" 
          options={['red', 'green', 'blue']} 
          defaultValue="green" /></td>
      </tr>
      <tr>
        <td>Vanilla textarea</td>
        <td><FormInput type="text" /></td>
      </tr>
    </tbody></table>

    <h2>Form</h2>

    <Form />

    <h2>Form readonly</h2>

    <Form readonly={true} recordId={0} />

    <h2>Actions</h2>
    <div><Actions onAction={type => alert(type)} /></div>

    <h2>Dialog</h2>
    <div><Dialog 
      header="Out of the box example" 
      onAction={type => alert(type)}>
        Hello, dialog!
      </Dialog></div>
    <p>&nbsp;</p>
    <div><Dialog 
        header="No cancel, custom button" 
        hasCancel={false}
        confirmLabel="Whatever"
        onAction={type => alert(type)}>
        Anything goes here, see: <Button>A button</Button>
        </Dialog></div>

    {/* more components go here... */}

  </div>,
  document.getElementById('pad')
);

